<template>
    <view class="product-list-filter">
        <view class="filter-items">
            <view class="btn filter-item" :class="{ 'btn-success-hollow': checkUseBarnd(), used: isShowBrand }"
                @click="showBrand">
                <text>品牌</text>
                <view :class="isShowBrand ? 'icon-up' : 'icon-down'"></view>
            </view>
            <view class="btn filter-item" :class="{ 'btn-success-hollow': checkUseTag(), used: isShowTag }"
                @click="showTag">
                <text>标签 </text>
                <view :class="isShowTag ? 'icon-up' : 'icon-down'"></view>
            </view>
            <view class="btn filter-item" :class="{ 'btn-success-hollow': selectSort != 0, used: isShowSort }"
                @click="showSort">
                <text>排序</text>
                <view :class="isShowSort ? 'icon-up' : 'icon-down'"></view>
            </view>
            <!-- <view v-if="!getAppSet().isHideImg" class="btn  filter-item filter-item-last" @click="changeListTheme">
				<uni-icons :type="displayData.IsShowImg?'list':'image'" size="32"></uni-icons>
				<iconsfont :customIcons="displayData.IsShowImg?'icon-youtu':'icon-wutu'" size="32"></iconsfont>
				<text>{{displayData.IsShowImg?'有图':'无图'}}</text>
			</view> -->
        </view>
        <!-- @touchmove.stop.prevent="moveHandle" -->
        <view class="pop">
            <view class="custom-pop custom-pop1" :style="{ top: popTop }" v-if="isShowBrand">
                <scroll-view scroll-y="true">
                    <view class="custom-pop-main">
                        <view class="tags" v-if="brandList.length > 0">
                            <view class="btn" :class="item.checked ? 'selected' : ''" v-for="(item, index) in brandList"
                                :key="index" @click="changeBrand(index)">{{ item.Name }}
                                <iconsfont customIcons="icon-dagou posicons" :color="'#ffffff'" size="20"
                                    v-if="item.checked"></iconsfont>
                            </view>
                        </view>
                        <view v-else class="color3">该分类没有对应品牌</view>
                        <view class="filter-action">
                            <button class="btn btn-gray" @click="cancelFilterBrands">重置</button>
                            <button class="btn btn-success" @click="doFilter(0)">确认</button>
                        </view>
                    </view>
                </scroll-view>
                <view class="custom-pop-bg" @click="hideBrandPop"></view>
            </view>
            <view class="custom-pop custom-pop1" :style="{ top: popTop }" v-if="isShowTag">
                <view class="custom-pop-main">
                    <view class="tags" v-if="tagList.length > 0">
                        <view class="btn" :class="item.checked ? 'selected' : ''" v-for="(item, index) in tagList"
                            :key="index" @click="changeTag(index)">
                            {{ item.Name }}
                            <iconsfont customIcons="icon-dagou posicons" :color="'#ffffff'" size="20"
                                v-if="item.checked"></iconsfont>
                        </view>
                    </view>
                    <view v-else class="color3">暂无对应商品标签</view>
                    <view class="filter-action">
                        <button class="btn btn-gray" @click="cancelFilterTags">重置</button>
                        <button class="btn btn-success" @click="doFilter(1)">确认</button>
                    </view>
                </view>
                <view class="custom-pop-bg" @click="hideTagPop"></view>
            </view>
            <view class="custom-pop custom-pop1" :style="{ top: popTop }" v-if="isShowSort">
                <view class="custom-pop-main">
                    <view class="sort">
                        <view class="sort-item" v-for="(item, index) in sortItems" :key="index"
                            @click="selectSortFn(item, index)">
                            <text class="sort-text" :class="{ currentSort: selectSort == index }">
                                {{ item.name }}
                            </text>
                            <uni-icons type="checkmarkempty" customIcons="icon-green" v-if="selectSort == index">
                            </uni-icons>
                        </view>
                    </view>
                </view>
                <view class="custom-pop-bg" @click="hideSortPop"></view>
            </view>
        </view>
    </view>
</template>

<script>
import { getElementTop } from "@/uni-sub-base/utils/elementUtil.js"
export default {
    name: "productListFilter",
    props: {
        tags: {
            type: Array,
            default: [],
        },
        brands: {
            type: Array,
            default: [],
        },
        displayData: {
            type: Object,
            default: {},
        },
        productTagId: {
            type: String,
            default: "",
        },
        productBrandId: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            isShowBrand: false,
            isShowTag: false,
            isShowSort: false,
            popTop: 0,
            selectSort: 0,
            sortItems: [
                // 排序方式列表
                {
                    name: "默认排序",
                    OrderBy: "display_sequence",
                    Sort: "desc",
                },
                {
                    name: "价格从低到高",
                    OrderBy: "grade_price",
                    Sort: "asc",
                },
                {
                    name: "价格从高到低",
                    OrderBy: "grade_price",
                    Sort: "desc",
                },
                {
                    name: "编码从低到高",
                    OrderBy: "product_code",
                    Sort: "asc",
                },
                {
                    name: "编码从高到低",
                    OrderBy: "product_code",
                    Sort: "desc",
                },
                // {
                // 	name: '销量从低到高',
                // 	OrderBy: 'sale_counts',
                // 	Sort: 'asc'
                // }, {
                // 	name: '销量从高到低',
                // 	OrderBy: 'sale_counts',
                // 	Sort: 'desc'
                // },
                // {
                // 	name: '名称从低到高',
                // 	OrderBy: 'product_name',
                // 	Sort: 'asc'
                // }, {
                // 	name: '名称从高到低',
                // 	OrderBy: 'product_name',
                // 	Sort: 'desc'
                // }
            ],
            brandList: [],
            tagList: [],
            ids: "",
        }
    },
    watch: {
        brands(e) {
            this.brandList = e
        },
        tags(e) {
            this.tagList = e
        },
        productTagId(tagId) {
            if (tagId) {
                this.tagList.forEach((e) => {
                    if (e.Id == tagId) {
                        e.checked = true
                    }
                })
                this.$forceUpdate()
            }
        },
        productBrandId(brandId) {
            if (brandId) {
                this.brandList.forEach((e) => {
                    if (e.Id == brandId) {
                        e.checked = true
                    }
                })
                this.$forceUpdate()
            }
        },
    },
    mounted() {
        this.brandList = this.brands
        this.tagList = this.tags
        this.getTop()
    },
    methods: {
        checkUseBarnd() {
            return this.brandList.find((item) => {
                return item.checked
            })
        },
        checkUseTag() {
            return this.tagList.find((item) => {
                return item.checked
            })
        },
        getTop() {
            getElementTop(this, ".pop", (e) => {
                this.popTop = e
            })
        },
        changeListTheme() {
            //切换商品列表显示
            let change = this.displayData.IsShowImg == 1 ? 0 : 1
            this.$emit("changeListTheme", change)
            this.hideAllPop()
        },
        //显示品牌
        showBrand() {
            this.getTop()
            this.isShowBrand = !this.isShowBrand
            this.isShowTag = false
            this.isShowSort = false
        },
        //显示标签
        showTag() {
            this.getTop()
            this.isShowTag = !this.isShowTag
            this.isShowBrand = false
            this.isShowSort = false
        },
        //显示排序
        showSort() {
            this.getTop()
            this.isShowSort = !this.isShowSort
            this.isShowBrand = false
            this.isShowTag = false
        },
        //隐藏品牌
        hideBrandPop() {
            this.isShowBrand = false
        },
        //隐藏标签
        hideTagPop() {
            this.isShowTag = false
        },
        //隐藏排序
        hideSortPop() {
            this.isShowSort = false
        },
        hideAllPop() {
            this.hideBrandPop()
            this.hideTagPop()
            this.hideSortPop()
        },
        //重置品牌
        cancelFilterBrands() {
            this.brandList.forEach((e) => {
                e.checked = false
            })
            this.cancelFilterTags()
            this.$forceUpdate()
        },
        //重置标签
        cancelFilterTags() {
            this.tagList.forEach((e) => {
                e.checked = false
            })
            this.$emit("TagloadingFn", this.ids)
            this.$forceUpdate()
        },
        doFilter(type) {
            if (type == 0) {
                this.$emit("filterBrandFn", this.brandList)
                this.hideBrandPop()
            } else {
                this.$emit("filterTagFn", this.tagList)
                this.hideTagPop()
            }
        },
        selectSortFn(item, index) {
            this.selectSort = index
            this.$emit("filterFn", item)
            this.hideSortPop()
        },
        // 修改品牌筛选
        changeBrand(index) {
            this.brandList[index].checked = !this.brandList[index].checked
            let ids = []
            this.brandList.forEach((e) => {
                if (e.checked) {
                    ids.push(e.Id)
                }
            })
            this.ids = ids.join(",")
            this.$emit("TagloadingFn", this.ids)
            this.$forceUpdate()
        },
        // 修改标签筛选
        changeTag(index) {
            this.tagList[index].checked = !this.tagList[index].checked
            this.$forceUpdate()
        },
        reSet() {
            this.selectSortFn(this.sortItems, 0)
            this.cancelFilterBrands()
            this.cancelFilterTags()
            this.hideAllPop()
        },
        moveHandle() {
            //禁止父元素滑动
        },
    },
}
</script>

<style lang="scss">
.product-list-filter {
    display: flex;
    flex-direction: column;
    // padding: 24rpx 26rpx 10rpx;
    background: $color-white;
    margin-bottom: 10rpx;

    // border-top: solid 1rpx #F1F1F1;
    .filter-items {
        box-shadow: 0px 2rpx 8rpx 0px rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: space-around;
        height: 64rpx;
        align-items: center;

        .filter-item {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: $app-page-padding;
            width: 126rpx;
            height: 54rpx;
            // border: 1rpx solid #F5F5F5;
            // background: #F5F5F5;
            // border-radius: 28rpx;
            padding: 0;

            &:first-child {
                margin-left: 0;
            }

            text {
                font-size: $font-size-28;
                margin-right: 10rpx;

                &:active {
                    color: $app-color-main;
                }
            }
        }

        .filter-item-last {
            border: none;
            position: relative;
            background: none;
            color: $app-color-main;

            text {
                color: $app-color-main;
            }
        }

        .filter-item-last::after {
            content: "";
            width: 2rpx;
            height: 36rpx;
            background: #eaeaea;
            // background:red;
            position: absolute;
            left: -20rpx;
        }

        .btn {}

        .btn-success-hollow {
            border-color: $app-color-main;
            // background: rgba(0, 169, 92, 0.06);
            border: none;

            .icon-up {
                border-bottom: 8rpx solid $app-color-main;
            }

            .icon-down {
                border-top: 8rpx solid $app-color-main;
            }
        }

        .btn-gray-fill {
            border: solid 1rpx $color-gray-5;
        }

        // .btn-success-hollow{
        // 	background: $color-white;
        // 	border-color: rgba(0,0,0,0);
        // }
        .btn-gray {
            border-color: $color-black-1;

            text {
                color: $color-black;
            }
        }

        .used {
            // background: rgba($app-color-main, 0.1);
            // border-color: $app-color-main;
        }
    }
}

.custom-pop-main {
    flex-direction: column;

    .filter-action {
        border-top: solid 1rpx $uni-bg-color-grey;
        padding: $app-page-padding;
    }
}

.tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: $app-page-padding;
    max-height: 500rpx;
    overflow-y: auto;

    .btn {
        width: 180rpx;
        border-radius: $border-radius-10;
        border: 0;
        background: $color-gray-5;
        margin-bottom: 20rpx;
        border: solid 1rpx $color-gray-5;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-align: center;
        line-height: 60rpx;
    }

    .selected {
        border: solid 1rpx $app-color-main;
        color: $app-color-main;
        position: relative;

        &:before,
        &:after {
            content: "";
            position: absolute;
        }

        &:before {
            background: currentColor;
            width: 46rpx;
            height: 46rpx;
            // border-radius: 100%;
            bottom: -23rpx;
            right: -23rpx;
            transform: rotate(45deg);
        }

        // &:after {
        // 	width: 6rpx;
        // 	height: 12rpx;
        // 	border: 5rpx solid;
        // 	border-color: transparent $color-white $color-white transparent;
        // 	transform: rotate(45deg);
        // 	bottom: 6rpx;
        // 	right: 4rpx;
        // }
    }
}

.tags::after {
    content: " ";
    width: 33%; //这个宽度和子元素宽度一致
    height: 0;
    display: block;
}

.sort {
    display: flex;
    flex-direction: column;
    padding: $app-page-padding;
    justify-content: center;

    .sort-item {
        display: flex;
        flex-direction: row;
        height: 80rpx;
        align-items: center;

        .sort-text {
            display: flex;
            flex: 1;
        }

        .currentSort {
            color: $app-color-main;
        }
    }
}

.color3 {
    color: $color-gray-3;
    font-size: 24rpx;
    padding: 24rpx 24rpx 0rpx 24rpx;
}
</style>
<style></style>
